<template>
  <div class="monitoring">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="处理厂名称" style="width: 250px">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item
        label="处理厂类型"
        label-width="100px"
        style="width: 250px; margin-left: 20px"
      >
        <el-select v-model="form.carTypeValue" placeholder="请选择">
          <el-option
            v-for="(item, index) in selectCarType"
            :value="item.label"
            :label="item.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="分组" label-width="70px" style="width: 250px;">
        <el-select v-model="form.groupingValue" :options="groupingList" placeholder="请选择分组">
          <el-option
            v-for="(item,index) in groupingList"
            :value="item.CLIENT_NO"
            :label="item.CLIENT_NAME"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="状态" style="width: 150px;">
        <el-select v-model="form.statusValue" :options="statusOptions" placeholder="请选择状态">
          <el-option
            v-for="(item,index) in statusOptions"
            :value="item.value"
            :label="item.label"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <span style="margin-left: 15px;font-size: small;">车辆数量：{{this.carNum}}辆</span> -->
      <!-- <el-form-item label="排序"> -->
      <!-- <el-radio-group
        v-model="radio"
        size="mini"
        fill="#007ACC"
        text-color="#fff"
        style="padding-left:12px;padding-right:8px;"
        @change="getInfoList"
      >
        <el-radio-button label="定位时间"></el-radio-button>
        <el-radio-button label="称重时间"></el-radio-button>
      </el-radio-group>-->
      <!-- </el-form-item> -->
      <!-- <div style="float: right;padding-right:30px;">
        <div class="people_number">
          在线:
          <span>{{statusNums.onlines}}</span>辆
        </div>
        <div class="people_number">
          全部:
          <span>{{statusNums.alls}}</span>辆
        </div>
      </div> -->

      <el-button
        size="mini"
        type="primary"
        @click="screenData"
        style="margin-left: 15px"
        >查 询</el-button
      >
      <!-- <el-form-item label="尾迹" style="width: 110px; margin-right: 10px">
        <el-select v-model="wakeValue" placeholder="尾迹">
          <el-option value="显示"></el-option>
          <el-option value="隐藏"></el-option>
        </el-select>
      </el-form-item>-->
      <!-- <div class="buttons"> -->
      <!-- <el-button
          class="iconfont icon-kaishi iconone"
          type="success"
          style="background-color:#347F10; color: #fff;"
          @click="startTracking"
          :disabled="disabled1"
        >开始跟踪</el-button>
        <el-button
          class="iconfont icon-tingzhi iconone"
          type="danger"
          style="background-color:#B36969; color: #fff; border: 0 none;"
          @click="cancelTracking"
          :disabled="disabled2"
      >取消跟踪</el-button>-->
      <!-- <el-button
        class="iconfont icon-tongji iconone"
        type="primary"
        size="mini"
        style="background:#468AD0"
        @click="onlineStatistics"
      >实时在线统计</el-button>-->
      <!-- <el-button
        class="iconfont icon-daochu iconone"
        size="mini"
        style="background-color: green; color: #fff; border: 0 none;"
        @click="exportExcel"
      >导出基础信息表</el-button>-->
      <el-button
        class="iconfont icon-daochu iconone"
        size="mini"
        style="background-color: green; color: #fff; border: 0 none"
        @click="exportExcel"
        >导出实时信息表</el-button
      >
      <!-- 自动刷新 -->
      <!-- <div class="switch iconone">
        <span>自动刷新</span>
        <el-switch
          v-model="switch_value"
          active-color="#13ce66"
          inactive-color="#ccc"
          @change="switchChange"
        ></el-switch>
      </div>-->
    </el-form>
    <!-- 人员信息列表 -->
    <div class="table_list">
      <el-table
        :data="tableCLC"
        :default-sort="{ prop: 'GPSTIME', order: 'descending' }"
        height="100%"
        style="width: 100%"
        size="mini"
        border
        fit
        highlight-current-row
        @row-click="clickRow"
        @row-dblclick="dblClickRow"
        @cell-mouse-enter="cellMouseEnter"
      >
        <el-table-column
          prop="NAME"
          label="处理厂名称"
          align="center"
           width="200"
        ></el-table-column>
        <el-table-column
          prop="LOCATION"
          label="位置"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="TYPE"
          label="处理厂类型"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="THEORY"
          label="处理类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="NUMBER"
          label="日处理量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="COMPANY"
          label="所属公司"
          align="center"
        ></el-table-column>
        <el-table-column  prop="化学需氧量" label="化学需氧量" align="center" width="120"></el-table-column>
<el-table-column  prop="氨氮" label="氨氮" align="center" width="100"></el-table-column>
<el-table-column  prop="pH值" label="pH值" align="center" width="100"></el-table-column>
<el-table-column  prop="二氧化硫" label="二氧化硫" align="center" width="100"></el-table-column>
<el-table-column  prop="一氧化碳" label="一氧化碳" align="center" width="100"></el-table-column>
<el-table-column  prop="甲烷" label="甲烷" align="center" width="100"></el-table-column>
<el-table-column  prop="硫化氢" label="硫化氢" align="center" width="100"></el-table-column>
<el-table-column  prop="氨气" label="氨气" align="center" width="100"></el-table-column>
<!-- <el-table-column  prop="一氧化碳" label="一氧化碳" align="center" width="100"></el-table-column> -->
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >定位</el-button
          > -->
            <!-- <el-button type="text" @click="flowrateClick(scope.$index, scope.row)"
            >环境参数</el-button
          >
          <el-button type="text" @click="SearchClick(scope.$index, scope.row)"
            >运行参数</el-button
          > -->
            <el-button
              type="text"
              @click="compositeClick(scope.$index, scope.row)"
              >综合信息</el-button
            >
            <!-- <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          > -->
            <!-- <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 右键人员列表菜单 -->
    <div
      class="row_box"
      v-if="MouseEvent.isShow"
      :style="`left: ${MouseEvent.left}px; top: ${MouseEvent.top}px;`"
    >
      <!-- <span @click="exportRowExcel">导出Excel</span> -->
      <!-- <span @click="groupArea(teamNumber)">负责区域</span> -->
      <!-- <span @click="clearArea(teamNumber)">清扫队负责区域</span> -->
      <!-- <span>负责区域</span> -->
      <!-- <span @click="cleanArea">清除区域</span> -->
      <span @click="trajectory">轨迹回放</span>
      <!-- <span @click="showCCTV">视频监控</span> -->
      <span @click="showYHLine">油耗曲线</span>
    </div>
    <!-- 综合信息弹出框 -->
    <el-dialog
      :title="form.NAME"
      :visible.sync="isVisibleComposite"
      width="1200px"
      :modal="false"
    >
      <el-descriptions class="margin-top" title="空气监测" :column="4" border>
        <el-descriptions-item>
          <template slot="label">
            <!-- <i class="el-icon-s-unfold"></i> -->
            甲烷
          </template>
          {{ form.甲烷 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <!-- <i class="el-icon-s-grid"></i> -->
            硫化氢
          </template>
          {{ form.硫化氢 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <!-- <i class="el-icon-office-building"></i> -->
            氨气
          </template>
          {{ form.氨气 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <!-- <i class="el-icon-office-building"></i> -->
            一氧化碳
          </template>
          {{ form.一氧化碳 }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-star-off"></i>
            满意度
          </template>
          <i class="el-icon-star-on"></i><i class="el-icon-star-on"></i
          ><i class="el-icon-star-on"></i><i class="el-icon-star-on"></i
          ><i class="el-icon-star-on"></i>
        </el-descriptions-item> -->
      </el-descriptions>
      <br />
      <br />
      <!-- <el-divider></el-divider> -->
      <!-- <el-descriptions class="margin-top" title="环境参数" :column="2" border>
        <el-descriptions-item label="今日总人数">
          <el-tag effect="dark">35</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="实时占用数">
          <el-tag effect="dark" type="warning">3</el-tag>
        </el-descriptions-item>
      </el-descriptions> -->
      <!-- 合格数 -->
      <!-- <el-descriptions class="margin-top" :column="5" border>
        <el-descriptions-item label="化学需氧量"> 20 </el-descriptions-item>
        <el-descriptions-item label="氨氮"> 250 </el-descriptions-item>
        <el-descriptions-item label="pH值"> 50 </el-descriptions-item>
        <el-descriptions-item label="二氧化硫"> 80 </el-descriptions-item>
        <el-descriptions-item label="一氧化碳"> 80 </el-descriptions-item>
      </el-descriptions> -->
      <!-- 化学需氧量	--	20	--
氨氮	--	250	--
二氧化硫	--	80	--
pH值	--	50	--
一氧化碳 -->
      <el-descriptions class="margin-top" title="渗滤液" :column="4" border>
        <el-descriptions-item label="化学需氧量">
          {{ form.化学需氧量 }}
        </el-descriptions-item>
        <el-descriptions-item label="氨氮">
          {{ form.氨氮 }}
        </el-descriptions-item>
        <el-descriptions-item label="pH值">
          {{ form.pH值 }}
        </el-descriptions-item>
        <el-descriptions-item label="二氧化硫">
          {{ form.二氧化硫 }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="一氧化碳">
          {{ form.一氧化碳 }}
        </el-descriptions-item> -->
      </el-descriptions>
      <!-- <h4 style="margin: 15px 0">{{ form.NAME }}</h4>
      <el-row :gutter="12">
        <el-col :span="4">
          <el-card shadow="always" style="background-color: #40c46e">
            <div class="ht">客流量</div>
            <div class="hd">20</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always" style="background-color: #40c46e">
            <div class="ht">空气质量</div>
            <div class="hd">优</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always" style="background-color: #4ebbe3">
            <div class="ht">湿度</div>
            <div class="hd">55%</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always" style="background-color: #4ebbe3">
            <div class="ht">温度</div>
            <div class="hd">10℃</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always" style="background-color: #e08662">
            <div class="ht">消耗水量</div>
            <div class="hd">12.84</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always" style="background-color: #e08662">
            <div class="ht">消耗电量</div>
            <div class="hd">36.69</div>
          </el-card>
        </el-col>
      </el-row> -->

      <div class="box">
        <div>
          <h4 style="margin: 15px 0">昨日每小时空气监测曲线</h4>
          <div
            class="one"
            style="width: 550px; height: 400px; background: #fff"
            id="disposalCC1"
          ></div>
        </div>
        <div>
          <h4 style="margin: 15px 0">昨日每小时渗滤液曲线</h4>
          <div
            class="two"
            style="width: 550px; height: 400px; background: #fff"
            id="disposalCC2"
          ></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'
import * as echarts from 'echarts';
import export2Excel from '@/utils/exportExcel/index.js'
// 转换地图坐标
// import { getLatLng } from '@/assets/js/pointtransfertools.js'

// import { BMap } from 'vue-baidu-map'
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  data () {
    return {
      timeID: null,
      account: '',
      // 筛选条件
      form: {
        name: '',
        groupingValue: '',
        statusValue: 0,
        carTypeValue: '全部'
      },
      isVisibleComposite: false,
      // 垃圾桶点位数据
      boxData: [],
      // 原始数据
      originalData: [],
      originalCLC: [],
      tableCLC: [],
      // 类型列表
      typeOptions: ['全部', '巡查员', '指导员'],
      // 状态列表
      statusOptions: [
        { value: '全部', label: '全部' },
        { value: 0, label: '在线' },
        { value: 6, label: '离线' }
      ],
      // tableData: [],
      statusNums: {
        alls: 0,
        onlines: 0,
        outlines: 0
      },
      // person_data: [],
      switch_value: true,
      time_value: '',
      time_Interval: [{
        value: 10000,
        label: '10秒'
      }, {
        value: 30000,
        label: '30秒'
      }, {
        value: 60000,
        label: '1分钟'
      }],
      groupingList: [],
      selectCarType: [{
        value: '全部',
        label: '全部'
      }, {
        value: '厨余垃圾处理厂',
        label: '厨余垃圾处理厂'
      }, {
        value: '可回收垃圾处理厂',
        label: '可回收垃圾处理厂'
      }, {
        value: '有害垃圾处理厂',
        label: '有害垃圾处理厂'
      }, {
        value: '其他垃圾处理厂',
        label: '其他垃圾处理厂'
        // }, {
        //   value: '有害垃圾车',
        //   label: '有害垃圾车'
        // }, {
        //   value: '自卸车',
        //   label: '自卸车'
        // }, {
        //   value: '小型冲洗车',
        //   label: '小型冲洗车'
        // }, {
        //   value: '小型垃圾车',
        //   label: '小型垃圾车'
      }],
      wakeValue: '',
      // 筛选数据
      screeningData: [],
      //查询出来的车辆数
      carNum: 0,
      // 是否显示实时在线统计对话框
      Visible: false,
      statisticalData: [],
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
      // teamNumber: '',
      // 右键表格
      row: null,
      clickRowData: null,
      disabled1: false,
      disabled2: true,
      trackingValue: false,
      localtion: {},
      radio: '定位时间'
    }
  },
  mounted () {
    // this.getInfoList()
    // this.getGroupingList()

    // this.selectChange()
    // this.getBoxList('')

    // this.getPlacePointZZZApi()
    this.getPlacePointCLCApi()
    // this.getPlacePointNCDApi()
    // this.getPlacePointCYApi()
    // this.getPlacePointXQCYApi()
    // this.getCLCPolygon()
  },
  methods: {
    // 绘制客流量曲线
    async dyclyhLineSearchClickF () {
      // this.isVisibleFlowrate = true;
      // if (this.echartLineF) {
      //   this.echartLineF.clear()
      // }
      setTimeout(() => {
        // 绘制图表
        this.echartLineF = echarts.init(document.getElementById('disposalCC1'));
        this.echartLineF.setOption(
          {
            // color: ["#409eff", "#ffdb5c", "#91cc75", "#fac858"],
            // legend: {
            //   top: '3%',
            //   data: ['每小时人流量']
            // },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },

            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: [
                '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时',
                '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '24时'
              ]
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: '氨气 mg/m³',
              type: 'line',
              // stack: 'Total',
              data: [
                '23.85', '19.85', '18.85', '23.85', '25.85', '18.85', '17.85', '16.85', '22.85', '23.85', '24.85', '22.85',
                '25.85', '18.85', '16.85', '17.85', '15.85', '22.85', '23.85', '24.85', '23.85', '22.85', '23.85', '22.02'
              ]
              }, {
              
              name: '一氧化碳 mg/m³',
              type: 'line',
              // stack: 'Total',
              data: [
                '4.85', '3.85', '3.85', '4.85', '5.85', '7.85', '6.85', '5.85', '6.85', '7.85', '4.85', '5.85',
                '5.85', '8.85', '6.85', '7.85', '5.85', '6.85', '5.85', '4.85', '6.85', '5.85', '3.85', '4.02'
              ]
            
            }, {
              name: '硫化氢 mg/m³',
              type: 'line',
              // stack: 'Total',
              data: [
                '2.75', '2.25', '2.25', '2.25', '2.25', '5.25', '6.25', '4.25', '3.25', '3.25', '2.25', '2.25',
                '2.25', '3.25', '2.25', '2.25', '1.25', '2.25', '2.25', '1.25', '1.25', '1.25', '2.25', '2.5'
              ]
            }, {
              
              name: '甲烷 mg/m³',
              type: 'line',
              // stack: 'Total',
              data: [
                '0.82', '0.73', '0.85', '1.13', '1.15', '1.08', '1.07', '1.16', '1.12', '1.13', '1.14', '1.10',
                '1.15', '1.08', '1.06', '1.07', '1.15', '1.12', '1.13', '1.14', '1.3', '0.72', '0.83', '0.62'
              ]
            },]
          });
      }, 2000)
    },
    // 绘制有害气体曲线
    async dyclyhLineSearchClickQ () {
      // this.dialogVisible = true;
      // if (this.echartLine) {
      //   this.echartLine.clear()
      // }
      setTimeout(() => {
        // 绘制图表
        this.echartLine = echarts.init(document.getElementById('disposalCC2'));
        this.echartLine.setOption(
          {

            legend: {
              top: '3%',
              data: ['化学需氧量', 'pH值', '氨氮']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },

            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: [
                '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时',
                '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '24时'
              ]
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: '化学需氧量',
              type: 'line',
              // stack: 'Total',
              data: [
                '23.39', '26.39', '24.39', '29.39', '28.39', '27.39', '25.39', '26.39', '24.39', '23.39', '25.39', '26.39',
                '25.39', '23.39', '23.39', '23.39', '21.39', '23.39', '23.39', '24.39', '23.39', '22.39', '23.39', '23.03'
              ]
            }, {
              name: 'pH值',//城市污水的pH值一般在6～8之间
              type: 'line',
              // stack: 'Total',
              data: [
                '7.3', '7.6', '7.4', '7.9', '7.8', '7.7', '7.5', '7.6', '7.4', '7.3', '7.5', '7.6',
                '7.5', '7.3', '7.3', '7.3', '7.1', '7.3', '7.3', '7.4', '7.3', '7.2', '7.3', '7.3'
              ]
            },{
              name: '氨氮',
              type: 'line',
              // stack: 'Total',
              data: [
                '1.03', '1.06', '1.04', '0.09', '0.08', '0.07', '0.05', '1.06', '1.04', '1.03', '1.05', '1.06',
                '1.05', '1.13', '1.10', '1.07', '1.11', '1.12', '1.08', '1.04', '1.03', '0.09', '0.08', '1.03'
              ]
            }, ]
          });
      }, 2000)
    },
    // 获得分组列表
    async getGroupingList () {
      var url = 'RubbishVehicle/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
      let { data } = await this.$Http.get(url)
      this.groupingList = data
    },
    // 获取人员信息列表
    async getInfoList () {
      this.realtimeOnlineStatistics()
      var url = 'RubbishVehicle/GetCarListCurrentVehicle?CLIENTNO=' + localStorage.getItem('CLIENT_NO') + '&LICENSEPLATE=&CARGROUP=&CARSTATUS=1&CARTYPE='
      let { data } = await this.$Http.get(url)
      this.originalData = data
      this.screenData()
    },
    compositeClick (index, row) {
      // 进入综合信息页面
      this.form = Object.assign({}, row);
      this.addDialogTitle = '综合信息'
      this.isVisibleComposite = true;
      this.dyclyhLineSearchClickF()
      this.dyclyhLineSearchClickQ()
    },
   
    // 筛选数据
    screenData () {
      let { name, groupingValue, statusValue, carTypeValue } = this.form
      // if (statusValue === '在线') statusValue = '0'
      // if (statusValue === '离线') statusValue = '6'
      // if (name) {
      //   this.screeningData = this.originalData.filter(item => item.LICENSEPLATE.includes(name))
      // } else {
      //   this.screeningData = this.originalData
      // }
      // this.screeningData = this.screeningData.filter(item => item.CLIENTNO.includes(groupingValue))
      // if (carTypeValue !== '全部') this.screeningData = this.screeningData.filter(item => item.CARTYPE === carTypeValue)
      // if (statusValue !== '全部') this.screeningData = this.screeningData.filter(item => item.STATUS === statusValue)

      var listXXLAJI = [], listJIYA = [], listYHLAJI = [], listZIXIE = [],
        listGOUBI = [], listCANCHU = [], listXIFEN = [], listXXCHONGXI = [];
      var listXXLAJI_Offline = [], listJIYA_Offline = [], listYHLAJI_Offline = [], listZIXIE_Offline = [],
        listGOUBI_Offline = [], listCANCHU_Offline = [], listXIFEN_Offline = [], listXXCHONGXI_Offline = [];
      this.screeningData = []
      this.originalData.forEach(item => {
  
        if (!item.LICENSEPLATE.includes(name)) {
          return;
        }
        if (!item.CLIENTNO.includes(groupingValue)) {
          return;
        }
        if (carTypeValue !== '全部' && item.CARTYPE != carTypeValue) {
          return;
        }
        if (statusValue !== '全部' && item.STATUS != statusValue) {
          return;
        }
        if (item.STATUS === 0) {
          item.STATUSstr = "在线"
          switch (item.CARTYPE) {
            case '小型垃圾车':
              listXXLAJI.push(item)
              break;
            case '挤压车':
              listJIYA.push(item)
              break;
            case '有害垃圾车':
              listYHLAJI.push(item)
              break;
            case '自卸车':
              listZIXIE.push(item)
              break;
            case '勾臂车':
              listGOUBI.push(item)
              break;
            case '餐厨车':
              listCANCHU.push(item)
              break;
            case '吸粪车':
              listXIFEN.push(item)
              break;
            case '小型冲洗车':
              listXXCHONGXI.push(item)
              break;
          }
        } else {
          item.STATUSstr = "离线"
          switch (item.CARTYPE) {
            case '小型垃圾车':
              listXXLAJI_Offline.push(item)
              break;
            case '挤压车':
              listJIYA_Offline.push(item)
              break;
            case '有害垃圾车':
              listYHLAJI_Offline.push(item)
              break;
            case '自卸车':
              listZIXIE_Offline.push(item)
              break;
            case '勾臂车':
              listGOUBI_Offline.push(item)
              break;
            case '餐厨车':
              listCANCHU_Offline.push(item)
              break;
            case '吸粪车':
              listXIFEN_Offline.push(item)
              break;
            case '小型冲洗车':
              listXXCHONGXI_Offline.push(item)
              break;
          }
        }
        if (item.VIDEO === 0 || item.VIDEO === "") {
          item.VIDEO = ""
        } else {
          item.VIDEO = "支持视频监控"
        }
        if (item.IsSetupOil === 0 || item.IsSetupOil === "") {
          item.IsSetupOil = ""
          item.OIL = ""
        } else {
          item.IsSetupOil = "支持油耗"
        }
        if (item.LOCKSTATUS === 0 || item.LOCKSTATUS === "") {
          item.LOCKSTATUS = ""
        } else {
          item.LOCKSTATUS = "支持开关量"
        }
        item.GPSTIME = item.GPSTIME.split('.')[0].replace('T', ' ')
        this.screeningData.push(item)
      })
      this.carNum = this.screeningData.length
      eventBus.$emit('mapData_Rubbish', [listXXLAJI, listJIYA, listYHLAJI, listZIXIE, listGOUBI, listCANCHU, listXIFEN, listXXCHONGXI, listXXLAJI_Offline, listJIYA_Offline, listYHLAJI_Offline, listZIXIE_Offline, listGOUBI_Offline, listCANCHU_Offline, listXIFEN_Offline, listXXCHONGXI_Offline])
    },
    // 自动查询
    selectChange () {
      // let timeId = null
      if (this.switch_value) {
        var that = this
        this.timeID = setInterval(() => {
          that.getInfoList()
          if (!that.switch_value) clearInterval(that.timeID)
        }, 30000)
      }
    },
    async realtimeOnlineStatistics () {
      // var url = 'RubbishVehicle/GetVehicleCurrentInfo?ClientNo=' + localStorage.getItem('CLIENT_NO')
      var url = 'Comprehensive/GetVehicleCurrentInfo?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&typeName=' + '垃圾&typeQuery=1'
      const { data } = await this.$Http.get(url)
      eventBus.$emit('realtimeOnlineStatistics_Rubbish', data)
    },
    // 右键表格某一行
    rowHandle (row, column, event) {
      window.event.returnValue = false
      this.row = row
      this.MouseEvent.left = event.clientX
      this.MouseEvent.top = event.clientY - 26 * 3

      this.MouseEvent.isShow = true
      // this.teamNumber = row.CLIENT_NO
    },
    formatterZTJK () {
      var random = Math.floor(Math.random() * (10 - 1 + 1) + 1)
      if (random == 1) {
        return '开'
      } else {
        return '关'
      }
    },
    // // 显示班组区域
    // groupArea (CLIENT_NO) {
    //   eventBus.$emit('showGroupArea', CLIENT_NO)
    //   this.MouseEvent.isShow = false
    // },
    // // 显示清扫队区域
    // clearArea (CLIENT_NO) {
    //   eventBus.$emit('showClearArea', CLIENT_NO)
    //   this.MouseEvent.isShow = false
    // },
    // // 清除区域
    // cleanArea () {
    //   eventBus.$emit('clearArea')
    //   this.MouseEvent.isShow = false
    // },
    // 导出Excel
    exportExcel () {
      let excelName = ''
      if (!document.querySelector('.group li.selected span')) {
        excelName = '车辆实时信息列表'
      } else {
        excelName = document.querySelector('.group li.selected span').innerText + '-信息'
      }
      // const excelName = document.querySelector('.group li.selected span').innerText + '-人员信息'
      const tHeader = ['编号', '车辆名称', '车辆类型', '在线状态', '最终定位时间', '分组', '位置', '剩余油量', '安装油耗',
        '安装视频', '安装开关量', '方向', '速度', '经度', '纬度']
      const filterVal = ['VID', 'LICENSEPLATE', 'CARTYPE', 'STATUSstr', 'GPSTIME', 'CLIENTNAME', 'LOCATION', 'OIL', 'IsSetupOil',
        'VIDEO', 'LOCKSTATUS', 'DIRECTION', 'SPEED', 'LNG', 'LAT']
      export2Excel(tHeader, filterVal, this.screeningData, excelName)
    },
    // 点击表格某一行
    clickRow (row) {
      this.MouseEvent.isShow = false
      this.clickRowData = row
    },
    // 双击表格某一行
    dblClickRow (row) {
      eventBus.$emit('mapDBrowRubbish', row)
    },
    // 右键导出Excel
    exportRowExcel () {
      this.MouseEvent.isShow = false
      const excelName = this.row.CLIENT_NAME + '-' + this.row.LICENSEPLATE + '-信息'
      const tHeader = ['编号', '车辆名称', '分组', '称重时间', '吨数', '垃圾类型', '来源类型', '工作点位', '处理场名称', '车辆类型', '最终定位时间', '位置', '航向', '航速', '经度', '纬度']
      const filterVal = ['VID', 'LICENSEPLATE', 'CLIENT_NAME', 'WEIGHING_TIME', 'TONNANG', 'RUBBISHTYPE', 'POINTTYPE', 'WORKINGPOINT', 'FACTORY', 'CAR_TYPE', 'ORIENTATION_TIME', 'POSITION', 'Direction', 'SPEED', 'LONGITUDE', 'LATITUDE']
      let ary = []
      ary.push(this.row)
      export2Excel(tHeader, filterVal, ary, excelName)
    },
    // // 开始跟踪
    // startTracking () {
    //   if (!this.clickRowData) {
    //     this.$message({
    //       message: '请先选择一位人员！',
    //       type: 'warning'
    //     })
    //     return false
    //   }
    //   this.clickRowData.isShow = true
    //   this.disabled1 = true
    //   this.disabled2 = false
    //   eventBus.$emit('Tracking', this.clickRowData)
    //   let timeId = null
    //   timeId = setInterval(() => {
    //     this.screenData()
    //     eventBus.$emit('Tracking', this.clickRowData)
    //     // console.log(11)
    //     if (this.trackingValue) clearInterval(timeId)
    //   }, 6000)
    // },
    // // 取消跟踪
    // cancelTracking () {
    //   this.trackingValue = true
    //   this.disabled1 = false
    //   this.disabled2 = true
    // },
    // 鼠标进入单元格显示其内容
    cellMouseEnter (row, column, cell, event) {
      cell.setAttribute('title', cell.innerText)
    },
    // 轨迹回放
    trajectory () {
      this.MouseEvent.isShow = false
      // 进入轨迹回放页面
      this.$router.push({ path: '/rubbishPlayback', query: { VID: this.row.VID, CARTYPE: this.row.CARTYPE } })
    },
    // 播放视频监控
    // showCCTV () {
    //   this.MouseEvent.isShow = false
    //   if (this.row.VIDEO === "") {
    //     this.$message.error('此车辆不支持视频');
    //   } else {
    //     eventBus.$emit('showCCTV_Rubbish', { carNo: this.row.LICENSEPLATE, simNo: '' })
    //   }
    // },
    showYHLine () {
      this.MouseEvent.isShow = false
      if (this.row.IsSetupOil === "支持油耗") {
        eventBus.$emit('HYEcharts_Vehicle', { CarID: this.row.VID, CarName: this.row.LICENSEPLATE })
      } else {
        this.$message.error('此车辆不支持油耗');
      }
    },
    // 获取处理厂
    async getPlacePointCLCApi () {
      // var url = 'RubbishVehicle/getPlaceCLC?CLIENTNO=' + localStorage.getItem('CLIENT_NO')
      // var url = 'CarService/getPlaceFactory?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')
      // let { data } = await this.$Http.get(url)
      // this.originalCLC = data;
      this.originalCLC = [
        {"甲烷": "0.75 mg/m³","硫化氢": "2.06 mg/m³","氨气": "18.85 mg/m³","一氧化碳": "4.85 mg/m³", "化学需氧量": "23.91 mg/L", "氨氮": "1.01 mg/L", "pH值": "7.3", "二氧化硫": "56.75", "二氧化碳": "20.914", "ID": "1001", "NAME": "天津碧海环保垃圾处理厂", "LONGITUDE": "117.426409", "LATITUDE": "38.872884", "LOCATION": "天津市津南区小站镇黄台工业园嘉园道11号", "CLIENT_NO": "0000009", "TYPE": "厨余垃圾处理厂", "NUMBER": "3000", "THEORY": "餐厨垃圾", "COMPANY": "天津碧海环保技术咨询服务有限公司" },
        {"甲烷": "0.78 mg/m³","硫化氢": "2.71 mg/m³","氨气": "10.60 mg/m³","一氧化碳": "5.28 mg/m³",  "化学需氧量": "27.33 mg/L", "氨氮": "1.03 mg/L", "pH值": "7.6", "二氧化硫": "12.246", "二氧化碳": "1.207", "ID": "1002", "NAME": "天津泰环垃圾处理厂", "LONGITUDE": "117.343029", "LATITUDE": "39.230103", "LOCATION": "天津市东丽区杨北公路296号", "CLIENT_NO": "0000009", "TYPE": "其他垃圾处理厂", "NUMBER": "1000", "THEORY": "餐厨垃圾", "COMPANY": "天津泰环再生资源利用有限公司" },
        // {"甲烷": "0.85 mg/m³","硫化氢": "2.52 mg/m³","氨气": "12.50 mg/m³","一氧化碳": "5.24 mg/m³",  "化学需氧量": "20.86 mg/L", "氨氮": "1.09 mg/L", "pH值": "7.4", "二氧化硫": "18.971", "二氧化碳": "3.031", "ID": "1003", "NAME": "天津双港垃圾焚烧发电厂", "LONGITUDE": "117.294731", "LATITUDE": "39.048150", "LOCATION": "", "CLIENT_NO": "0000009", "TYPE": "其他垃圾处理厂", "NUMBER": "2000", "THEORY": "餐厨垃圾", "COMPANY": "" },
        {"甲烷": "0.77 mg/m³","硫化氢": "2.08 mg/m³","氨气": "13.15 mg/m³","一氧化碳": "3.56 mg/m³",  "化学需氧量": "26.82 mg/L", "氨氮": "1.04 mg/L", "pH值": "7.3", "二氧化硫": "38.091", "二氧化碳": "2.883", "ID": "1004", "NAME": "天津光大环保垃圾处理厂", "LONGITUDE": "117.326705", "LATITUDE": "38.851005", "LOCATION": "", "CLIENT_NO": "0000009", "TYPE": "其他垃圾处理厂", "NUMBER": "1500", "THEORY": "餐厨垃圾", "COMPANY": "光大环保能源(天津)有限公司" },
        {"甲烷": "0.82 mg/m³","硫化氢": "2.13 mg/m³","氨气": "11.51 mg/m³","一氧化碳": "2.68 mg/m³",  "化学需氧量": "21.46 mg/L", "氨氮": "1.11 mg/L", "pH值": "7.4", "二氧化硫": "46.533", "二氧化碳": "0.578", "ID": "1006", "NAME": "东丽中环节餐厨垃圾处理厂", "LONGITUDE": "117.340171", "LATITUDE": "39.230758", "LOCATION": "", "CLIENT_NO": "0000009", "TYPE": "厨余垃圾处理厂", "NUMBER": "1000", "THEORY": "餐厨垃圾", "COMPANY": "" },
        // {"甲烷": "0.76 mg/m³","硫化氢": "2.32 mg/m³","氨气": "12.20 mg/m³","一氧化碳": "6.50 mg/m³",  "化学需氧量": "25.03 mg/L", "氨氮": "1.02 mg/L", "pH值": "7.7", "二氧化硫": "28.461", "二氧化碳": "1.854", "ID": "1007", "NAME": "东丽中环节垃圾焚烧处理厂", "LONGITUDE": "117.338834", "LATITUDE": "39.228994", "LOCATION": "", "CLIENT_NO": "0000009", "TYPE": "其他垃圾处理厂", "NUMBER": "1000", "THEORY": "餐厨垃圾", "COMPANY": "" }
        ]
      this.screenCLC();
    },
    screenCLC () {
      this.tableCLC = this.originalCLC;
      eventBus.$emit('mapPlacePointCLC', this.tableCLC)
    },
    // 获取转运站
    async getPlacePointZZZApi () {
      var url = 'RubbishVehicle/getPlaceZZZ?CLIENTNO=' + localStorage.getItem('CLIENT_NO')
      let { data } = await this.$Http.get(url)
      eventBus.$emit('mapPlacePointZZZ', data)
    },
    // 获取农村点
    async getPlacePointNCDApi () {
      var url = 'RubbishVehicle/getPlaceNCD?CLIENTNO=' + localStorage.getItem('CLIENT_NO')
      let { data } = await this.$Http.get(url)
      eventBus.$emit('mapPlacePointNCD', data)
    },
    // 获取餐饮单位
    async getPlacePointCYApi () {
      // var url = 'RubbishVehicle/getPlaceCY?CLIENTNO=' + localStorage.getItem('CLIENT_NO')
      // let { data } = await this.$Http.get(url)
      eventBus.$emit('mapPlacePointCY', [])
    },
    // 获取小区垃圾点
    async getPlacePointXQCYApi () {
      var url = 'RubbishVehicle/getPlaceXQCY?CLIENTNO=' + localStorage.getItem('CLIENT_NO')
      let { data } = await this.$Http.get(url)
      eventBus.$emit('mapPlacePointXQCY', data)
    },
    // 获取处理厂边界点
    async getCLCPolygon () {
      var url = 'RubbishVehicle/GetFactoryInfo?TYPE=1&ID=1001'
      let { data } = await this.$Http.get(url)
      eventBus.$emit('mapCLCPolygon', data)
    }
  },
  beforeDestroy () {
    clearInterval(this.timeID)
  }
}
</script>

<style scoped lang="less">
.monitoring {
  .el-form-item__content {
    max-width: 100px;
  }
  height: 100%;
  // position: relative;
  .el-form {
    width: 100%;
    height: 40px;
    line-height: 40px;
    // display: flex;
    // align-items: center;
    overflow: hidden;
    // border-bottom: 2px solid #007ACC;
    .el-form-item {
      // float: left;
      display: inline-block;
      margin: 0;
      // flex-shrink: 0;
      .el-input {
        height: 22px;
      }
    }
    .el-button {
      padding: 0 5px;
      height: 28px;
      border-radius: 2px;
      display: inline-block;
      /deep/span {
        font-size: 14px;
        // margin-left: 4px;
        line-height: 22px;
      }
    }
    .people_number {
      height: 40px;
      line-height: 40px;
      padding: 0 5px;
      color: #333;
      // float: left;
      display: inline-block;
      // flex-shrink: 0;
      span {
        display: inline-block;
        padding: 0 2px;
        height: 30px;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        text-align: center;
      }
    }
    .switch {
      display: inline-block;
      min-width: 100px;
      // height: 40px;
      // line-height: 40px;
      margin-left: 10px;
      // float: left;
      // flex-shrink: 0;
      span {
        margin-right: 2px;
        cursor: default;
        color: #606266;
      }
      .el-select {
        max-width: 100px;
        height: 22px;
        margin-left: 5px;
        /deep/.el-input__suffix {
          top: 8px;
          line-height: 24px;
        }
      }
    }
    .el-button {
      flex-shrink: 0;
    }
  }
  @media screen and (min-width: 1600px) {
    .fold_btn {
      opacity: 0;
    }
  }
  @media screen and (max-width: 1660px) {
    .el-form {
      width: 100%;
    }
    .fold_btn {
      display: inline-block;
    }
  }
  // @media screen and (min-width: 1455px) {

  // }
  @media screen and (max-width: 1455px) {
    .iconone {
      display: none !important;
    }
  }
  .fold_btn {
    position: relative;
  }
  .fold_btns {
    position: absolute;
    top: 65px;
    right: 0;
    width: auto;
    height: auto;
    overflow-y: scroll;
    background: #fff;
    z-index: 1111111;
    display: none;
  }
  .buttons {
    z-index: 55555;
    width: 80px;
    height: 120px;
    background: #eee;
  }
  .table_list {
    // position: absolute;
    // top: 70px;
    // bottom: 0px;
    margin-left: 20px;
    overflow-y: auto;
    width: calc(~'100% - 40px');

    height: calc(~'100% - 70px');
    .el-table {
      height: 100%;
    }
    /deep/.el-table__body-wrapper {
      height: calc(~'100% - 34px');
      overflow-y: auto;
    }
  }
}
// .icon-kaishi .icon-kaishi:hover{
//   background: #60a53e!important;
//   color: #eee;
// }
// .icon-tingzhi .icon-tingzhi:hover{
//   background: #cc8c8c!important;
//   color: #eee;
// }
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
// .row_box {
//   width: 120px;
//   // height: 130px;
//   color: #666;
//   background-color: #f3f3f3;
//   border: 1px solid #ccc;
//   position: fixed;
//   span {
//     display: block;
//     text-align: center;
//     line-height: 26px;
//     cursor: default;
//     &:hover {
//       color: #fff;
//       background-color: #007ACC;
//     }
//   }
// }
.statistical {
  width: 600px;
  min-height: 390px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    padding-left: 5px;
    box-sizing: border-box;
    h3 {
      color: #666;
    }
    span {
      margin-left: 450px;
    }
  }
  .statistical_content {
    max-height: 350px;
    min-height: 310px;
    padding: 0 20px;
    background-color: #f3f3f3;
    overflow-y: auto;
  }
  .statistical_time {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #666;
    background-color: #f3f3f3;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
  }
}
.box {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  /* grid-template-rows: repeat(2, 50%); */
  grid-template-areas: 'one two';
}
.one {
  margin: 5px;
  grid-area: one;
}

.two {
  margin: 5px;
  grid-area: two;
  }
</style>
